<template>
  <div>
    <el-table empty-text="当前没有数据" :data="shopList" style="width: 100%">
      <el-table-column align="center" label="序号" width="100">
        <template #default="scope">
          <span>{{ scope.$index }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品信息" width="140">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <img style="width: 88px" :src="scope.row.ImgUrl" alt="" />
            <span>{{ scope.row.GoodsName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100">
        <template #default="scope">
          <el-tag size="medium"> {{ status(scope.row.Start) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格" width="250">
        <template #default="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px" v-if="scope.row.PriceType == 1"
            >现价：￥{{ scope.row.Price }}</span
          >
          <span style="margin-left: 10px" v-if="scope.row.PriceType == 2"
            >￥{{ scope.row.Price + '——' + '￥' + scope.row.Price2 }}
          </span>
          <span style="margin-left: 10px" v-if="scope.row.PriceType == 3"
            >{{
              '市场价：￥' +
              scope.row.Price +
              '—' +
              '现价：￥' +
              scope.row.Price2
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="160">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="primary" @click="upShop(scope.row)">{{
            scope.row.Start ? '下架' : '上架'
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block-pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        v-model:currentPage="currentPage"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
import { RemoveInRoom, OnSale, GetRoomProductShop } from '@/service/main/main'
export default defineComponent({
  props: {
    roomid: {
      type: String,
    },
  },
  async setup(props) {
    let reload: any = inject('reload')
    // eslint-disable-next-line vue/no-setup-props-destructure
    let roomid = props.roomid
    // 获取数据
    let shopList = ref()
    const pageSize = 5
    let currentPage = ref(1)
    let totalPage = ref(1)
    async function goShop(val: number) {
      const ShopRes = await GetRoomProductShop(roomid, '', pageSize, val - 1)
      shopList.value = ShopRes.Data
      totalPage.value = Math.ceil(ShopRes.Total / pageSize) * 100
      console.log(totalPage.value)
    }
    goShop(currentPage.value)

    const handleCurrentChange = (val: number) => {
      currentPage.value = val
      goShop(val)
    }

    const status = (param: any) => (param == 0 ? '已下架' : '已上架')
    // 删除直播间商品
    const handleDelete = (parameter: any) => {
      console.log(parameter.GoodsId)
      const { GoodsId } = parameter
      ElMessageBox.confirm('此操作将永久删除商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          RemoveInRoom(roomid, GoodsId)
          goShop(currentPage.value)
          ElMessage({
            type: 'success',
            message: '删除成功!',
          })
          location.reload()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除',
          })
        })
    }
    // 直播间上下架商品
    const upShop = (parameter: any) => {
      const { GoodsId, Start } = parameter
      let onSale = 1
      if (Start == 0) {
        onSale = 1
      } else {
        onSale = 0
      }
      OnSale(roomid, GoodsId, onSale)
      // eslint-disable-next-line no-constant-condition
      // setTimeout(() => {

      // }, 1000)

      location.reload()
    }

    return {
      handleDelete,
      status,
      upShop,
      handleCurrentChange,
      shopList,
      totalPage,
    }
  },
})
</script>

<style scoped>
.block-pagination {
  padding: 20px 10px;
}
.propelling {
  font-size: 0.25rem;
  font-weight: bold;
}
.serach-shop {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
</style>
